/* eslint-disable import/no-named-as-default-member */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable no-alert */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable array-callback-return */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-restricted-syntax */
/* eslint-disable import/order */

import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import fs from 'fs';
import { ipcRenderer } from 'electron';

const Tester = () => {
  const [filedatas, setfiledatas] = useState([{}]);
  useEffect(() => {
    document.addEventListener('drop', (event) => {
      event.preventDefault();
      event.stopPropagation();
      for (const f of event.dataTransfer.files) {
        // Using the path attribute to get absolute file path
        console.log('File Path of dragged files: ', f.path);
        fs.readFile(f.path, 'utf8', (err, data) => {
          if (err) return;
          setfiledatas((filedatas) => {
            return [
              ...filedatas,
              {
                name: f.name,
                data,
              },
            ];
          });
        });
      }
    });
    document.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });

    document.addEventListener('dragenter', (event) => {
      console.log('File is in the Drop Space');
    });

    document.addEventListener('dragleave', (event) => {
      console.log('File has left the Drop Space');
    });
  }, []);

  return (
    <div className="container">
      <div className="center" style={{ height: '90vh' }}>
        <Button
          onClick={() => {
            ipcRenderer.send('save_path', new Date().getTime());
          }}
        >
          敬请期待
        </Button>
        {filedatas?.map((it) => {
          return (
            <div>
              <p>{it.name}</p>
              <p style={{ whiteSpace: 'pre-wrap' }}>{it.data}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Tester;
